<template>
  <div
    class="w-screen min-h-screen flex justify-center gap-[20px] mt-[20px] mb-[40px]"
  >
    <div class="w-[840px] flex flex-col gap-5">
      <div class="w-full h-[300px] rounded-2xl overflow-hidden relative">
        <a-carousel arrows autoplay class="h-full">
          <div class="carousel-item">
            <img
              src="/banner1.png"
              alt="banner1"
              class="w-full h-full object-cover"
            />
          </div>
          <div class="carousel-item">
            <img
              src="/banner3.png"
              alt="banner3"
              class="w-full h-full object-cover"
            />
          </div>
        </a-carousel>
      </div>
      <!-- 文章区域 -->
      <div class="w-full">
        <div class="w-full rounded-2xl bg-white">
          <!-- 按钮组容器 -->
          <div class="bg-white rounded-t-2xl">
            <div class="p-5 flex gap-2">
              <button
                v-for="btn in buttons"
                :key="btn.name"
                @click="handleButtonClick(btn.id)"
                :class="[
                  'px-4 py-1.5 text-sm transition-colors outline-none focus:outline-none border-none hover:border-none focus:border-none rounded-[4px]',
                  activeButton === btn.id
                    ? 'bg-blue-500 text-white'
                    : 'bg-transparent text-[#737373] hover:text-[#1A1A1A]',
                ]"
              >
                {{ btn.name }}
              </button>
            </div>
            <div class="mx-5 h-[1px] bg-[#E5E5E5]"></div>
          </div>

          <!-- 文章列表区域 -->
          <div class="p-5">
            <div class="grid divide-y divide-gray-200">
              <div class="w-full overflow-hidden">
                <template v-if="loading">
                  <HomePostSkeleton v-for="n in 4" :key="n" />
                </template>
                <template v-else>
                  <HomePostCard
                    v-for="article in articles"
                    :key="article.id"
                    :article="article"
                    class="first:pt-0 pt-4"
                    @click="handlePostClick(article.id)"
                  />
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w-[340px]">
      <div class="sticky top-5 w-full">
        <!-- 修改这里：未登录时显示 LoginCard，登录后显示日历组件 -->
        <template v-if="authStore.isAuthenticated">
          <div class="w-full border-[#d9d9d9] rounded-2xl bg-white">
            <CustomCalendar
              :day-details="mockDetails"
              :completion-data="heatmapData.data"
              :max-streak="heatmapData.maxStreak"
              :month-solved="heatmapData.thisMonthCount"
              :daily-streak="heatmapData.consecutiveWins"
            />
          </div>
        </template>
        <template v-else>
          <LoginCard />
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { LeftOutlined, RightOutlined } from "@ant-design/icons-vue";
import CustomCalendar from "../../../components/home/Calendar.vue";
import HomePostCard from "../../../components/home/HomePostCard.vue";
import HomePostSkeleton from "../../../components/home/HomePostSkeleton.vue";
import { ref, onMounted, watch } from "vue";
import { post } from "../../../api/frontend/post";
import { topic } from "../../../api/frontend/topic"; // 添加topic api引入
import { useRouter } from "vue-router"; // 添加路由导入
import { useAuthStore } from "@/stores/auth"; // 添加 auth store
import LoginCard from "../../../components/forum/NowLoginCard.vue"; // 添加 LoginCard 导入

const router = useRouter(); // 添加路由实例
const authStore = useAuthStore(); // 添加 auth store 实例

// 将mockDetails改为响应式数据
const mockDetails = ref([]);

// 获取每日话题列表
const getDailyTopicList = async () => {
  if (!authStore.isAuthenticated) return;
  try {
    const res = await topic.getDailyTopicList();
    if (res.code === 200) {
      // 转换数据格式以匹配现有结构，添加 topicId 和 isDone
      mockDetails.value = res.data.map((item) => ({
        Date: item.date,
        Question: item.title,
        topicId: item.topicId,
        isDone: item.isDone, // 添加 isDone 字段
      }));
    }
  } catch (error) {
    console.error("获取每日话题失败:", error);
  }
};

// 添加热力图数据的响应式引用
const heatmapData = ref({
  data: authStore.isAuthenticated ? [] : null, // 未登录时设为 null
  maxStreak: 0,
  thisMonthCount: 0,
  consecutiveWins: 0,
});

// 获取热力图数据
const getHeatmapData = async () => {
  if (!authStore.isAuthenticated) return;
  try {
    const res = await topic.getHeatmap();
    if (res.code === 200) {
      heatmapData.value = {
        // 直接使用原始数据，不做转换
        data: res.data.heatmapData,
        maxStreak: res.data.maxStreak,
        thisMonthCount: res.data.thisMonthCount,
        consecutiveWins: res.data.consecutiveWins,
      };
    }
  } catch (error) {
    console.error("获取热力图数据失败:", error);
  }
};

// 更新获取热力图数据的方法
const updateHeatmapData = async () => {
  // 如果未登录，重置数据并直接返回
  if (!authStore.isAuthenticated) {
    heatmapData.value = {
      data: null,
      maxStreak: 0,
      thisMonthCount: 0,
      consecutiveWins: 0,
    };
    mockDetails.value = [];
    return;
  }

  // 已登录才获取数据
  await Promise.all([getDailyTopicList(), getHeatmapData()]);
};

// 修改按钮数据，添加id和更有意义的名称
const buttons = [
  { id: 1, name: "推荐" },
  { id: 2, name: "最多点赞" },
  { id: 3, name: "最多收藏" },
  { id: 4, name: "最多评论" },
];

// 添加响应式状态来跟踪当前选中的按钮
const activeButton = ref(1); // 默认选中第一个按钮

// 文章数据改为响应式空数组
const articles = ref([]);

// 添加loading状态
const loading = ref(false);

// 获取文章列表方法
const getArticles = async (type = "") => {
  loading.value = true;
  try {
    const res = await post.getHomePostList({
      type,
      pageNumber: 1,
      pageSize: 10,
    });
    if (res.code === 200) {
      articles.value = res.data.data;
    }
  } catch (error) {
    console.error("获取文章列表失败:", error);
  } finally {
    loading.value = false;
  }
};

// 修改点击事件处理函数，根据按钮ID获取对应type
const handleButtonClick = async (buttonId) => {
  activeButton.value = buttonId;
  const typeMap = {
    1: "", // 推荐
    2: "1", // 最多点赞
    3: "2", // 最多收藏
    4: "3", // 最多评论
  };
  await getArticles(typeMap[buttonId]);
};

// 修改跳转方法，使用完整的路由路径
const handlePostClick = (id) => {
  router.push({
    path: `/post/${id}`, // 修改这里，使用path而不是name
  });
};

// 组件挂载时获取文章列表
onMounted(async () => {
  await getArticles();
  await updateHeatmapData(); // 使用新的更新方法
});

// 监听登录状态变化
watch(
  () => authStore.isAuthenticated,
  (newValue) => {
    updateHeatmapData();
  }
);
</script>

<style scoped>
/* 轮播图容器样式 */
:deep(.ant-carousel) {
  height: 100%;
}

:deep(.slick-slider),
:deep(.slick-list),
:deep(.slick-track) {
  height: 100%;
}

.carousel-item {
  height: 300px; /* 与父容器高度相同 */
  line-height: 300px;
  text-align: center;
  background: #364d79;
  overflow: hidden;
}

:deep(.slick-slide) {
  pointer-events: none; /* 修复可能的点击事件问题 */
}

:deep(.slick-slide.slick-active) {
  pointer-events: auto;
}

/* 箭头样式 */
:deep(.slick-prev),
:deep(.slick-next) {
  z-index: 2;
  width: 40px;
  height: 40px;

  &::before {
    font-size: 24px;
  }
}

:deep(.slick-dots) {
  bottom: 12px;

  li {
    button {
      background: #fff;
      opacity: 0.7;

      &:hover {
        opacity: 1;
      }
    }

    &.slick-active {
      button {
        background: #1890ff;
        opacity: 1;
      }
    }
  }
}

/* 自定义箭头样式 */
.custom-arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.custom-arrow:hover {
  background: rgba(0, 0, 0, 0.5);
}

.custom-arrow.prev {
  left: 10px;
}

.custom-arrow.next {
  right: 10px;
}

.custom-arrow :deep(svg) {
  font-size: 20px;
  color: #fff;
}

.custom-calendar {
  /* 移除边框样式 */
}

.custom-calendar th {
  font-weight: 500;
}

.custom-calendar td {
  border-radius: 9999px;
  transition: all 0.2s;
}

/* 确保弹出提示框在其他元素之上 */
.group:hover .group-hover\:block {
  display: block;
}

/* 提示框样式 */
.group-hover\:block {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 移除之前的样式，使用新的样式 */
.custom-calendar td:hover .rounded-full {
  background-color: #ebf5ff;
  color: #2563eb;
}
</style>
